<?php include(BASE_PATH . "/view/layout/layoutP.phtml"); ?>

<style>
    .container-12{position: relative;}
   .carousel-inner{
   background: linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.0001) 100%)
   }
   .itemImg{
       width: 100%;
       height: 472px;
       position: relative;
       opacity: 0;
   }
    .active{opacity: 1;}
    .container-12 .carousel-indicators>li.active {
        background: #f2f2f2;
        border: 1px solid #f2f2f2;
    }
    .container-12 .carousel-indicators>li{
        margin-right: 30px;
        background: #808080;
        border: 1px solid #808080;}
</style>
<div class="container-12">
    <div class="carousel-inner">
        <div class="itemImg" data-slide="0">
            <img src="/img/navbg1.jpg">
        </div>
    </div>
    <ol class="carousel-indicators">
        <li data-slide-to="0"></li>
        <li data-slide-to="1"></li>
        <li data-slide-to="2"></li>
        <li data-slide-to="3"></li>
    </ol>

</div>
<script>
$(function () {
    itemImgImg.init();
})
var imgList = [
    {src:"/img/navbg1.jpg"},
    {src:"/img/navbg2.jpg"},
    {src:"/img/navbg3.jpg"},
    {src:"/img/navbg4.jpg"},
];
var itemImgImg = {
    duration:6000,
    timer:"0",
    i:"0",
    init:function () {
        this.imgMove();
        this.setInterval();
        this.ClickEvent();
    },
    setInterval:function () {
        itemImgImg.timer = setInterval(itemImgImg.imgMove,itemImgImg.duration)
    },
    clearInterval:function () {
        clearInterval(itemImgImg.timer);
    },
    imgMove:function () {
            if(itemImgImg.i > 3){
                itemImgImg.i = "0";
            }
            itemImgImg.MoveEvent();
            itemImgImg.i++;
    },
    MoveEvent:function () {
        $(".carousel-indicators>li").removeClass("active")
        var imgSrc = imgList[itemImgImg.i].src;
        $(".carousel-indicators").find("li[data-slide-to='"+itemImgImg.i+"']").addClass("active");
        $(".itemImg").animate({opacity:"0.3"},300);
        $(".itemImg").find("img").attr("src",imgSrc);
        $(".itemImg").animate({opacity:"1"},300);

    },
    ClickEvent:function () {
        $(".carousel-indicators>li").click(function () {
            var slide = $(this).attr("data-slide-to");
            itemImgImg.i = slide;
            itemImgImg.imgMove();
            itemImgImg.clearInterval();
            itemImgImg.setInterval();
        })
    }
}
</script>




<?php include(BASE_PATH . "/view/layout/footer.phtml"); ?>